<template>
  <div id="head">
    <div class="head-top">
      <h2 class="">
        <i class="iconfont iconreload" v-on:click="$router.go(0)"></i>
        <!--<i class="iconfont iconarrowleft" v-on:click="backHandle"></i>-->
      </h2>

      <div class="right-tab">

        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>

        <!--<el-popover-->
        <!--    placement="top"-->
        <!--    v-model="visible"-->
        <!--    trigger="hover">-->

        <!--  <div class="operation-list">-->
        <!--    <a href="javascript:void(0);" v-on:click="resetPassword">修改密码</a>-->
        <!--    <a href="javascript:void(0);" v-on:click="logout">退出系统</a>-->
        <!--  </div>-->

        <!--  <div class="nickname reference" slot="reference">-->
        <!--    <p>{{ userName }}</p>-->
        <!--    <i class="iconfont iconcaret-down"></i>-->
        <!--  </div>-->
        <!--</el-popover>-->

        <!--@mouseenter="visible=true"-->
        <!--@mouseleave="visible=false"-->

        <div
            class="nickname"
            @mouseenter="visible=true"
            @mouseleave="visible=false">
          <p>{{ userName }}</p>
          <i class="iconfont iconcaret-down"></i>
          <ul v-show="visible"
              class="user-list animated"
              :class="[visible?'fadeInDown':'fadeOut']">
            <li @click="resetPassword">修改密码</li>
            <li @click="logout">退出系统</li>
          </ul>
        </div>

      </div>
    </div>

    <!-- 重置密码弹窗 -->
    <a-modal
        dialogClass="reset-modal"
        centered
        title="重置密码"
        cancelText="取消"
        okText="确定"
        :visible="resetPasswordShow"
        :confirm-loading="resetPasswordLoading"
        @ok="resetPasswordConfirm"
        @cancel="resetPasswordCancel">

      <el-form :model="resetForm" :rules="resetFormRules" ref="resetForm" size="small" label-width="auto">

        <!-- 现在密码 -->
        <el-form-item label="原密码：" prop="password">
          <el-input type="password" v-model.trim="resetForm.password" placeholder="请输入原密码"
                    @blur="checkOldPassword"></el-input>
        </el-form-item>

        <!-- 新密码 -->
        <el-form-item label="新密码：" prop="newPassword">
          <el-input type="password" v-model.trim="resetForm.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>

        <!-- 确认密码 -->
        <el-form-item label="确认密码：" prop="newPasswordConfirm">
          <el-input type="password" v-model.trim="resetForm.newPasswordConfirm" placeholder="请再次输入新密码"></el-input>
        </el-form-item>
      </el-form>

    </a-modal>

    <!--<tab></tab>-->
  </div>
</template>

<script>

import tab from '@/components/tab/tab';
import {mapMutations, mapActions} from 'vuex';
import {modalMixin} from '@/mixins/commonMixin';

export default {
  name: 'Head',

  mixins: [modalMixin],

  components: {
    tab
  },

  data() {
    let checkSamePassword = (rule, value, callback) => {
      if (value === this.resetForm.password) {
        callback(new Error('新密码不能与原密码相同'));
      } else {
        callback();
      }
    };

    let checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.resetForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      // 用户名
      userName: sessionStorage.getItem('userName') || '',
      visible: false,
      // 修改密码显隐
      dialogPswVisible: false,

      // 重置密码弹窗显隐
      resetPasswordShow: false,
      // 重置密码按钮提交加载
      resetPasswordLoading: false,

      resetForm: {
        password: '',
        newPassword: '',
        newPasswordConfirm: '',
      },
      resetFormRules: {
        password: [
          {required: true, message: '请输入原密码', trigger: 'blur'},
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'},
          {validator: checkSamePassword, trigger: 'blur'}
        ],
        newPasswordConfirm: [
          {required: true, message: '请再次输入新密码', trigger: 'blur'},
          {validator: checkPass, trigger: 'blur'}
        ],
      },

    };
  },

  methods: {
    ...mapMutations({
      logoutSave: 'logout' // 将 `this.logoutSave()` 映射为 `this.$store.commit('logout')`
    }),
    ...mapActions({
      start: 'startNoticeAfterSuspend'
    }),
    // 登出
    logout() {
      this.$modal({
        title: `确认退出登录吗？`,
        content: ``,
        okText: '确定',
        cancelText: '取消',
        confirmHandle: () => {
          this.logoutSave('');
        },
      });
    },

    // 返回
    backHandle() {
      this.$router.go(-1);

      // 如果当前是消息通知编辑页，暂停任务
      (this.$route.name === 'NoticeEdit') && (this.start(this.$route.params.id));
    },

    // 点击重置密码
    resetPassword() {
      console.log('重置密码');
      this.resetPasswordShow = true;
    },
    // 重置密码确定
    resetPasswordConfirm() {
      this.$refs.resetForm.validate(async (valid) => {
        if (valid) {
          console.log('确定');

          const res = await this.$api.auth.getResetPassword({
            account: this.$store.state.user,
            password: this.resetForm.password,
            newPassword: this.resetForm.newPassword
          });

          console.log(res);

          if (res.data.type === 'success' && res.data.data) {
            // 修改成功,退出登录
            this.resetPasswordShow = false;
            this.$message.success('修改成功，请重新登录');
            await this.resetPasswordCancel();
            await this.logoutHandle();

          } else {
            this.$message.error(res.data.msg);
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置密码取消
    resetPasswordCancel() {
      console.log('取消');
      this.$nextTick(() => {
        this.$refs.resetForm.resetFields();
      });
      this.resetPasswordShow = false;
    },

    // 验证旧密码是否正确
    async checkOldPassword() {
      if (this.resetForm.password === '') {
        return;
      }
    },

    logoutHandle() {
      this.tools.delA(2);
      this.logoutSave('');
      this.$router.replace('/login');
    }

  },


};
</script>

<style scoped lang="less">
  #head {
    width: 100%;

    .head-top {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        font-weight: 600;
        font-size: 26px;

        i {
          color: rgba(0, 0, 0, 0.65);
          cursor: pointer;

          &:nth-of-type(1) {
            margin: 0 24px;
          }
        }
      }

      .right-tab {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .el-avatar {
          width: 24px;
          height: 24px;
        }

        .area-text {
          font-size: 14px;
          color: #142333;
        }

        .nickname {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 4px;
          cursor: pointer;
          position: relative;

          img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-left: 24px;
          }

          p {
            font-size: 14px;
            color: #142333;
            margin-left: 8px;
            margin-right: 16px;
          }

          i {
            font-size: 15px;
            color: #919ba6;
          }
        }

        .reference {
          font-size: 36px;
          cursor: pointer;
        }

      }
    }

  }

  .user-list {
    min-width: 88px;
    padding: 14px 16px;
    position: absolute;
    top: 42px;
    left: 0;
    background-color: #fff;
    box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.05), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
    animation-duration: .3s;

    li {
      display: block;
      font-size: 14px;
      line-height: 20px;
      color: #32546f;

      &:not(:last-child) {
        margin-bottom: 12px;
      }

      &:hover {
        color: #1890ff;
      }
    }
  }

</style>

<style>
  .reset-modal .ant-modal-body .el-form-item .el-input__inner {
    width: 100% !important;
  }
</style>
